// 首页打开发送请求
async function fn () {

  const { data: res } = await axios.get('/dashboard')

  // console.log(res)

  let { groupData, overview, provinceData, salaryData, year } = res.data

  for (let key in overview) {
    document.querySelector(`[name=${key}]`).innerHTML = overview[key]
  }

  // 折线图
  line(year)
  // 大饼状图
  pie(salaryData)
  // 小饼状图
  sex(salaryData)
  // 地图
  mapChart(provinceData)
  // 柱状图
  bar(groupData)

}
fn()


// 线性图
function line (data) {
  // console.log(data)
  const chartDom = document.getElementById('line')
  const myChart = echarts.init(chartDom)
  const option = {
    title: {
      text: "2022全学科薪资走势",
      top: 15,
      left: 10,
      textStyle: {
        fontSize: 16
      }
    },
    xAxis: {
      type: 'category',
      // data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
      data: data.map(item => item.month),
      axisLabel: {
        color: '#999'
      },
      axisLine: {
        lineStyle: {
          color: '#ccc',
          type: 'dotted'
        }
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          type: 'dotted'
        }
      }
    },
    // 提示框组件；鼠标移入的提示
    tooltip: {
      // 触发方式（什么时候提示，鼠标移入到具体的图形上提示，还是移入到范围内就提示）
      // trigger: 'item' // item表示鼠标移入到具体的图形上提示
      trigger: 'axis' // axis表示到轴线的范围内就提示
    },
    grid: {
      top: '20 %'
    },
    color: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [{
        offset: 0, color: '#499FEE' // 0% 处的颜色
      }, {
        offset: 1, color: '#5D75F0' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    },
    series: [
      {
        // data: [9000, 12000, 15000, 13000, 10000, 18000, 14000, 10000, 12000, 13000, 15000, 19000],
        data: data.map(item => item.salary),
        type: 'line',
        smooth: true,// 平滑曲线
        symbolSize: 10,
        // 线条粗细
        lineStyle: {
          width: 6,
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#499FEE' // 0% 处的颜色
            }, {
              offset: 0.8, color: 'rgba(255,255,255,0.2)' // 0% 处的颜色
            }, {
              offset: 1, color: 'rgba(255,255,255,0)' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }
        }
      }
    ]
  }

  option && myChart.setOption(option)
}



// 大饼状图
function pie (data) {
  // console.log(data)

  const chartDom = document.getElementById('salary')
  const myChart = echarts.init(chartDom)
  const option = {
    title: {
      text: "班级薪资分布",
      top: 15,
      left: 10,
      textStyle: {
        fontSize: 16
      }
    },
    tooltip: {
      trigger: 'item'
    },
    // 图例
    legend: {
      bottom: '6%',
      left: 'center',
      itemWidth: 13 // 图例图形的宽度
    },
    color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
    series: [
      {
        name: '班级薪资分布',
        type: 'pie',
        // 居中
        center: ['50%', '50%'],
        radius: ['50%', '64%'],
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        labelLine: {
          show: false
        },
        // data: [
        //   { value: 1048, name: '1万以下' },
        //   { value: 235, name: '1万-2万' },
        //   { value: 580, name: '1.5万-2万' },
        //   { value: 484, name: '2万以上' }
        // ]
        data: data.map(item => {
          return { value: item.b_count + item.g_count, name: item.label }
        })
      }
    ]
  }

  option && myChart.setOption(option)

}


// 小饼状图
function sex (data) {
  // console.log(data)
  const chartDom = document.getElementById('gender')
  const myChart = echarts.init(chartDom)
  const option = {
    title: [
      {
        text: '男女薪资分布',
        // 距离顶部10，距离左边10，文字大小16
        top: 10,
        left: 10,
        textStyle: {
          fontSize: 16
        }
      },
      {
        text: '男生',
        // 距离顶部45%，距离左边45%，文字大小12
        top: '45%',
        left: '45%',
        textStyle: {
          fontSize: 12
        }
      },
      {
        text: '女生',
        // 距离顶部85%，距离左边45%，文字大小12
        top: '85%',
        left: '45%',
        textStyle: {
          fontSize: 12
        }
      },
    ],
    tooltip: {
      trigger: 'item'
    },
    // // 图例
    // legend: {
    //   bottom: '6%',
    //   left: 'center',
    //   itemWidth: 13 // 图例图形的宽度
    // },
    color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
    series: [
      {
        name: '男生薪资分布',
        type: 'pie',
        // 居中
        center: ['50%', '30%'],
        radius: ['20%', '30%'],
        // itemStyle: {
        //   borderRadius: 10,
        //   borderColor: '#fff',
        //   borderWidth: 2
        // },
        // label: {
        //   show: false,
        //   position: 'center'
        // },
        // labelLine: {
        //   show: false
        // },
        // data: [
        //   { value: 1048, name: '1万以下' },
        //   { value: 235, name: '1万-2万' },
        //   { value: 580, name: '1.5万-2万' },
        //   { value: 484, name: '2万以上' }
        // ]
        data: data.map(item => {
          return { value: item.g_count, name: item.label }
        })
      },
      {
        name: '女生薪资分布',
        type: 'pie',
        // 居中
        center: ['50%', '70%'],
        radius: ['20%', '30%'],
        // itemStyle: {
        //   borderRadius: 10,
        //   borderColor: '#fff',
        //   borderWidth: 2
        // },
        // label: {
        //   show: false,
        //   position: 'center'
        // },
        // labelLine: {
        //   show: false
        // },
        // data: [
        //   { value: 1048, name: '1万以下' },
        //   { value: 235, name: '1万-2万' },
        //   { value: 580, name: '1.5万-2万' },
        //   { value: 484, name: '2万以上' }
        // ]
        data: data.map(item => {
          return { value: item.b_count, name: item.label }
        })
      }
    ]
  }

  option && myChart.setOption(option)

}



// 柱状图
function bar (data) {
  // console.log(data)
  // 解构赋值

  const { 1: p1, 2: p2, 3: p3, 4: p4, 5: p5, 6: p6, 7: p7, 8: p8 } = data
  // console.log(data)

  // console.log(p1)
  const chartDom = document.getElementById('lines')
  const myChart = echarts.init(chartDom)
  const option = {
    xAxis: {
      type: 'category',
      // data: ['张三', '李四', '赵云', '张飞', '马超', '黄忠', '亚索', '盲僧'],
      data: p1.map(item => item.name),
      // x轴文字配置
      axisLabel: {
        color: '#999'
      },
      // 轴线设置
      axisLine: {
        lineStyle: {
          color: "#ccc",
          type: 'dashed'
        }
      }
    },
    yAxis: {
      type: 'value',
      // y轴 改变分割线的
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      }
    },
    tooltip: {
      // 触发方式（什么时候提示，鼠标移入到具体的图形上提示，还是移入到范围内就提示）
      trigger: 'item' // item表示鼠标移入到具体的图形上提示
      // trigger: 'axis' // axis表示到轴线的范围内就提示
    },
    grid: {

      left: 70,
      top: 30,
      right: 30,
      bottom: 50

    },
    series: [
      {
        // data: [12200, 17932, 13901, 13934, 21290, 23300, 13300, 13320],
        data: p1.map(item => item.hope_salary),
        type: 'bar',
        name: '期望薪资',// 这个数据的名字，可以在鼠标移入的提示上显示
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0, color: '#34D39A' // 0% 处的颜色
          }, {
            offset: 1, color: 'rgba(52,211,154,0.2)' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        },
        barWidth: 30,
      },
      {
        // data: [22820, 19932, 16901, 15934, 31290, 13300, 14300, 18320],
        data: p1.map(item => item.salary),
        type: 'bar',
        name: '就业薪资', // 这个数据的名字，可以在鼠标移入的提示上显示
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0, color: '#499FEE' // 0% 处的颜色
          }, {
            offset: 1, color: 'rgba(73,159,238,0.2)' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        },
        // 设置粗细
        barWidth: 30,
      }
    ]
  }

  option && myChart.setOption(option)

  document.querySelector('#btns').addEventListener('click', function (e) {


    // console.log(p1)
    // console.log(b)

    if (e.target.tagName === 'BUTTON') {



      document.querySelector('.btn-blue').classList.remove('btn-blue')
      e.target.classList.add('btn-blue')


      const a = e.target.innerHTML

      // console.log(data)


      option.xAxis.data = data[a].map(item => item.name)

      option.series[0].data = data[a].map(item => item.hope_salary)

      option.series[1].data = data[a].map(item => item.salary)

      option && myChart.setOption(option)


    }


  })

}



// 地图

function mapChart (data) {

  console.log(data)

  const mapChart = echarts.init(document.querySelector('#map'))

  // 数据
  let mapData = [
    { name: '南海诸岛', value: 0 },
    { name: '北京', value: 3 },
    { name: '天津', value: 2 },
    { name: '上海', value: 4 },
    { name: '重庆', value: 1 },
    { name: '河北', value: 20 },
    { name: '河南', value: 23 },
    { name: '云南', value: 0 },
    { name: '辽宁', value: 15 },
    { name: '黑龙江', value: 12 },
    { name: '湖南', value: 2 },
    { name: '安徽', value: 5 },
    { name: '山东', value: 18 },
    { name: '新疆', value: 0 },
    { name: '江苏', value: 5 },
    { name: '浙江', value: 1 },
    { name: '江西', value: 4 },
    { name: '湖北', value: 3 },
    { name: '广西', value: 2 },
    { name: '甘肃', value: 9 },
    { name: '山西', value: 11 },
    { name: '内蒙古', value: 14 },
    { name: '陕西', value: 14 },
    { name: '吉林', value: 10 },
    { name: '福建', value: 0 },
    { name: '贵州', value: 0 },
    { name: '广东', value: 0 },
    { name: '青海', value: 3 },
    { name: '西藏', value: 0 },
    { name: '四川', value: 1 },
    { name: '宁夏', value: 1 },
    { name: '海南', value: 0 },
    { name: '台湾', value: 0 },
    { name: '香港', value: 0 },
    { name: '澳门', value: 0 }
  ]

  mapData.filter((item) => {

    let res = data.find(v => {
      return v.name.includes(item.name)
    })

    // console.log(res)

    if (res) {
      item.value = res.value
    }


  })
  const option = {

    title: {
      text: "班级薪资分布",
      top: 10,
      left: 10,
      textStyle: {
        fontSize: 16
      }
    },

    // 数据
    series: [
      {
        type: 'map',
        map: 'china',
        name: '籍贯分布',

        symbolSize: 5,
        data: mapData,
        // 文字
        label: {
          show: true,
          fontSize: 10,
          color: 'rgba(0,0,0,0.7)'
        },

        // 每一项
        itemStyle: {

          // 背景颜色
          borderColor: 'rgba(0, 0, 0, 0.2)',

          // 边界线
          areaColor: '#E0FFFF',

          // 鼠标移入哪一项设置
          emphasis: {
            // 区域颜色
            areaColor: "#34D39A",

            // 区域边框
            borderWidth: 0,

            //  阴影模糊大小
            shadowBlur: 20,

            // 阴影偏移
            shadowOffsetX: 0,
            shadowOffsetY: 0,

            // 阴影颜色
            shadowColor: 'rgba(0, 0, 0, 0.5)'

          }
        },
      }
    ],

    // 视觉映射组件
    visualMap: {
      type: 'continuous',
      min: 0,
      max: 10,
      inRange: {
        color: ['#fff', '#0075F0']
      },
      text: [10, 0], // 两端的文字
      left: 40,
      bottom: 20
    },
    // 提示框组件；鼠标移入的提示
    tooltip: {
      formatter: '{b}: {c}位学员',
      textStyle: {
        color: '#fff'
      },
      backgroundColor: 'rgba(0, 0, 0, 0.5)',
      borderColor: 'transparent',
    },


  }

  mapChart.setOption(option)



}
